import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {List, Map, OrderedSet, fromJS} from 'immutable';

import {Row, Col, Progress, Input, Table, message} from 'antd';
const Search = Input.Search;
import Image from 'components/Image'
import {maxSelectedGoodsNumQL, insertKeyIntoAddedGoodsQL} from '../ql';
import noop from 'util/noop';


@Relax
export default class AddedGoods extends Component {


    static defaultProps = {
        goodsAddedList: insertKeyIntoAddedGoodsQL,
        pagination: Map(),
        keyWords: '',
        selectedRowKeys: OrderedSet(),
        maxSelectedGoodsNum: maxSelectedGoodsNumQL,
        setKeyWords: noop,
        onSearch: noop,
        changePage: noop,
        setSelected: noop
    };


    constructor(props) {
        super(props);

        this.state = {
            selectedRowKeys: OrderedSet()
        }
    }


    render() {
        const {maxSelectedGoodsNum, keyWords, pagination, goodsAddedList, selectedRowKeys} = this.props;

        const rowSelection = {
            selectedRowKeys: selectedRowKeys.toJS(),
            onSelect: (record, selected, selectedRows) => this.onSelect(record, selected, selectedRows),
            onSelectAll: (selected, selectedRows, changeRows) => this.onSelectAll(selected, selectedRows, changeRows)
        };

        const tablePagination = {
             current: pagination.get('pageNum'),
             total: pagination.get('totalCount'),
             pageSize: pagination.get('pageSize'),
            showTotal: (total, range)=>`共${total}条`,
            onChange: (pageNum)=>{this.changePage(pageNum)},
            showQuickJumper: true
        };


        return (
            <div>
                <Row>
                    <Col span={2}>选择商品</Col>
                    <Col span={8}>
                        <div style={{width: '200px'}}>
                            <Progress percent={selectedRowKeys.count() / maxSelectedGoodsNum * 100} strokeWidth={5} showInfo={false}/>
                        </div>
                    </Col>
                    <Col span={4} >{`${selectedRowKeys.count()}/${maxSelectedGoodsNum}`}</Col>
                    <Col span={10}>
                        <div className="ant-search-input-wrapper purchase-search-input" >
                            <Search placeholder="请输入商品名称" value={keyWords}
                                    onChange={(e)=>this.setKeyWords(e)}
                                    onSearch={()=>this.onSearch()}/>
                        </div>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <Table rowSelection={rowSelection}
                               pagination={tablePagination}
                               dataSource={goodsAddedList.toJS()}
                               columns={this.renderColumn()}
                               scroll={{ y: 340 }}/>
                    </Col>
                </Row>
            </div>
        )
    }


    /**
     * 选择or取消某列
     * @param record
     * @param selected
     * @param selectedRows
     */
    onSelect(record, selected, selectedRows) {
        const {setSelected, selectedRowKeys, maxSelectedGoodsNum} = this.props;

        if (selectedRowKeys.has(record.key)) {
            setSelected(selectedRowKeys.delete(record.key));
        }else if (selectedRowKeys.count() < maxSelectedGoodsNum)  {
            setSelected(selectedRowKeys.add(record.key));
        }else {
            message.warn('一次最多只能添加' + maxSelectedGoodsNum + '件商品')
        }
    }


    /**
     * 全选or全不选列
     * @param selected
     * @param selectedRows
     * @param changeRows
     */
    onSelectAll(selected, selectedRows, changeRows) {
        const {maxSelectedGoodsNum} = this.props;

        let selectedRowKeys = [];
        if (selected) {
            selectedRowKeys = fromJS(selectedRows).filter((v, index)=>index + 1 <= maxSelectedGoodsNum).map(row=>row.get('key')).toArray();
            if (selectedRows.length > maxSelectedGoodsNum) {
                message.warn('一次最多只能添加' + maxSelectedGoodsNum + '件商品')
            }
        }

        this.props.setSelected(OrderedSet(selectedRowKeys));
    }


    /**
     * 设置关键字
     * @param e
     */
    setKeyWords(e) {
        this.props.setKeyWords(e.target.value);
    }


    /**
     * 关键字搜索查询
     */
    onSearch() {
        this.props.onSearch();
    }


    /**
     * 点击页面查询
     * @param pageNum
     * @param pageSize
     */
    changePage(pageNum) {
        this.setState({
            selectedRowKeys: OrderedSet()
        });
        this.props.changePage({pageNum});
    }


    /**
     * 列渲染
     * @returns {[*,*,*]}
     */
    renderColumn() {
        return [
            {
                key: 'image',
                title: '图片',
                dataIndex: 'image',
                render: (text, record, index) => <Image src={record.image} alt={record.name} width={50} height={50}/>
            },
            {
                key: 'name',
                title: '商品名称',
                dataIndex: 'itemName',
            },
            {
                key: 'bn',
                title: '商品编码',
                dataIndex: 'itemBn',
            }
        ]
    }
}